import { BaseModel, Label } from '@/plugin';
import { createMarker, createPopup } from './element';

export default class Site extends BaseModel {
  constructor(options) {
    super();

    this.options = {
      sites: [],
      ...options,
    };

    this.#init();
  }

  #init() {
    const { sites } = this.options;

    const popupGroup = new THREE.Group();
    popupGroup.name = 'popup';
    this.object.add(popupGroup);
    this.object.name = 'site';

    sites.forEach((site) => {
      // popup
      const popupEl = createPopup(site);
      const popup = new Label({
        html: popupEl,
        position: site.position,
      });
      popup.name = 'popup';
      popupGroup.add(popup);

      // marker
      const markerEl = createMarker(site);
      const marker = new Label({
        html: markerEl,
        position: site.position,
      });
      this.object.add(marker);

      // event
      marker.element.addEventListener('pointerdown', () => {
        popup.visible = !popup.visible;
      });
    });
  }
}
